<template>
    <div class='dialog'>
        <div class='newAdd dialog-con addUserNum'>
                <div class="companynews">
                    <h2>新增用户</h2>
                </div>
            <div class="infoUSer qcfd">
                <div class="f-fl">
                    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="70px">
                        <el-form-item label="账号" prop="username">
                            <el-input v-model="ruleForm.username"></el-input>
                        </el-form-item>
                        <el-form-item label="密码" prop="password">
                            <el-input v-model="ruleForm.password" type="password"></el-input>
                        </el-form-item>
                        <el-form-item label="姓名" prop="name">
                            <el-input v-model="ruleForm.name"></el-input>
                        </el-form-item>
                        <el-form-item label="手机号" prop="mobile">
                            <el-input v-model="ruleForm.mobile"></el-input>
                        </el-form-item>
                        <el-form-item label="角色" prop="roles">
                            <el-select v-model="ruleForm.roles" placeholder="请选择">
                                <el-option
                                v-for="item in roleList"
                                :key="item.id"
                                :label="item.roleDesc"
                                :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="出生日期" props="birthday">
                            <el-date-picker
                                v-model="ruleForm.birthday"
                                type="date"
                                placeholder="选择日期"
                                value-format="yyyy-MM-dd"
                                format="yyyy 年 MM 月 dd 日">
                            </el-date-picker>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="submitForm('ruleForm')" style="margin:0 40px" :disabled="isAdduser" size="medium">确定</el-button>
                            <el-button @click="cancel"   size="medium">取消</el-button>
                       </el-form-item>
                    </el-form>
                </div>
                <div class="uploadImg f-fr" style="margin-right:60px;">
                    <el-upload
                        class="avatar-uploader"
                        action="/api/erp/qny/pic/qiniu"
                        :show-file-list="false"
                        :on-success="handleAvatarSuccess"
                        :before-upload="beforeAvatarUpload">
                        <img v-if="imageUrl" :src="imageUrl" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import api from 'js/service'
import {localStorage}  from 'js/localStorage'
import regular from 'js/regular'
export default {
    inject:['reload'],
    data(){
        return{
            //创建按钮是否disabled
            isAdduser:false,
            //图片地址
            imageUrl: '',
            show:false,
            u_phone:false,
            p_password:false,
            userId:'',
            //v-model
            username:'',
            password:'',
            roles:'',
            nickName:'',
            name:'',
            birthday:'',
            mobile:'',
            picture:'',
            //角色列表
            roleList: [],
            ruleForm:{
                username:'',
                password:'',
                name:'',
                mobile:'',
                birthday:'',
                roles:'',
            },
            rules:{
                username: [
                    { required: true, message: '请输入账号', trigger: 'blur' },
                    { min: 2, max: 20, message: '长度在2到 20 个字符', trigger: 'blur' }
                ],
                password: [
                    { required: true, message: '请输入密码', trigger: 'change' }
                ],
                name: [
                    { required: true, message: '请输入姓名', trigger: 'change' }
                ],
                roles: [
                    { required: true, message: '请选择角色', trigger: 'change' }
                ],
                mobile: [
                    { required: true, message: '请输入手机号', trigger: 'change' },
                    { min: 11, max: 11, message: '请输入正确的手机号', trigger: 'blur' }
                ],
                birthday:[
                    { required: false, message: '请选择出生日期', trigger: 'change' }
                ]
            }
        }
    },
    created(){
        this.init()
    },
    // props:{
    //     list:{
    //         type:Array,
    //         default:[]
    //     }
    // },
    methods:{
        //选择全部的公司名称，显示对应的companyCode
        init(){
        //获取userId
         this.userId= localStorage.get('userID')
         this.getRole()
        },
        //获取角色列表
        getRole(){
            let success=data=>{
                if(data.code=='OK'){
                    this.roleList=data.data
                }else{
                    this.$message.error(data.msg)
                }
            }
            api.roleList({},success)
        },
        //点击确定按钮，掉接口
        confirm(){
            // for(var i in this.list){
            //     if(this.list[i].username==this.ruleForm.username){
            //         return this.$message.error('该账号已存在')
            //     }
            // }
            var  roles=this.ruleForm.roles
            let parmas={
                username:this.ruleForm.username,
                password:this.ruleForm.password,
                name:this.ruleForm.name,
                mobile:this.ruleForm.mobile,
                birthday:this.ruleForm.birthday,
                picture:this.picture,
                userId:this.userId,
                roles:[roles]
            }
            this.isAdduser=true
            let success=data=>{
                if(data.code=='OK'){
                    this.$message.success('员工添加成功')
                    this.isAdduser=false
                    this.reload()
                    this.$emit('closeDialog')
                }else{
                    this.isAdduser=false
                    this.$message.error(data.msg)
                }
            }
            api.sysAdd(parmas,success)

        },
        //关闭弹窗
        cancel(){
            this.$emit('closeDialog')
        },
        submitForm(ruleForm) {
            this.$refs[ruleForm].validate((valid) => {
                if (valid) {
                    this.confirm()
                } else {
                    return false;
                }
            });
        },
        handleAvatarSuccess(res, file) {
            this.picture=res.data
            this.imageUrl = URL.createObjectURL(file.raw);
        },
        beforeAvatarUpload(file) {
            const isJPG = file.type === 'image/jpeg';
            const isLt2M = file.size / 1024 / 1024 < 2;
            if (!isJPG) {
                this.$message.error('上传头像图片只能是 JPG 格式!');
            }
            if (!isLt2M) {
                this.$message.error('上传头像图片大小不能超过 2MB!');
            }
            return isJPG && isLt2M;
        },
    }
}
</script>
<style scoped>
.infoUSer .el-input{
    width:250px;
}
.infoUSer .el-date-editor.el-input, .el-date-editor.el-input__inner{
    width:250px;
}
.infoUSer .el-select{
  width:250px;
}
.addUserNum .infoUSer .supplyinfoUSer .companyname label{
    width:92px;
}
.addUserNum .el-picker-panel .el-date-picker .el-popper{
    z-index: 2031;
    position: fixed;
    top: 160px;
    left: 1006px;
}
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}
.avatar-uploader .el-upload:hover {
    border-color: #409EFF;
}
.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
}
.avatar {
    width: 178px;
    height: 178px;
    display: block;
}
</style>
<style lang="scss" scoped>
.addUserNum{
    width:650px;
    height:520px;
    .companynews{
        h2{
            height:60px;
            line-height: 60px;
            text-indent: 20px;
            font-size: 20px;
            width:100%;
        }
    }
    .infoUSer{
        margin-left:3%;
        height:auto;
        .authbrand{
            margin-right:10px;
            width:440px;
            .auth{
                margin-bottom: 6px;
                p{
                    margin-left: 25%;
                    color:red;
                    font-size:10px;
                }
                label{
                    width: 100px;
                    display: inline-block;
                    margin:23px 0 10px 0;
                }
                span{
                    color:red;
                    text-align: center;
                }
            }
            .block{
                span{
                    width:100px;
                    display: inline-block;
                }
            }
        }
    }
    .personAdd{
        margin-left:71%;
        margin-top:2%;
    }
}
</style>
